<template>
  <div class="h-full bg-gray-50 p-4 overflow-y-auto">
    <h2 class="text-lg font-semibold mb-4">物料组件</h2>
    
    <el-input
      v-model="searchText"
      placeholder="搜索组件..."
      class="mb-4"
      size="small"
    />
    
    <el-collapse v-model="activeCategories">
      <el-collapse-item
        v-for="category in categories"
        :key="category"
        :title="category"
        :name="category"
      >
        <div class="grid grid-cols-2 gap-2">
          <div
            v-for="material in filteredMaterials.filter(m => m.category === category)"
            :key="material.type"
            class="border rounded p-2 cursor-pointer hover:bg-blue-50 transition-colors"
            draggable="true"
            @dragstart="onDragStart($event, material)"
            @click="addMaterial(material)"
          >
            <div class="flex items-center">
              <el-icon class="mr-2">
                <component :is="material.icon" />
              </el-icon>
              <span class="text-sm">{{ material.name }}</span>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useDesignerStore } from '../store'
import { generateId } from '../utils'
import type { MaterialItem } from '../types'

const { store, registerMaterial, addField } = useDesignerStore()
const searchText = ref('')
const activeCategories = ref(['basic', 'layout', 'advanced'])

// 注册基础物料组件
const materials: MaterialItem[] = [
  {
    type: 'input',
    name: '文本输入',
    icon: 'Edit',
    category: 'basic',
    defaultProps: {
      type: 'input',
      label: '文本输入',
      placeholder: '请输入内容',
      required: false
    },
    component: null
  },
  {
    type: 'textarea',
    name: '文本域',
    icon: 'Document',
    category: 'basic',
    defaultProps: {
      type: 'textarea',
      label: '文本域',
      placeholder: '请输入内容',
      rows: 3
    },
    component: null
  },
  {
    type: 'select',
    name: '下拉选择',
    icon: 'Select',
    category: 'basic',
    defaultProps: {
      type: 'select',
      label: '下拉选择',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' }
      ]
    },
    component: null
  },
  {
    type: 'radio',
    name: '单选框',
    icon: 'CircleCheck',
    category: 'basic',
    defaultProps: {
      type: 'radio',
      label: '单选框',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' }
      ]
    },
    component: null
  },
  {
    type: 'checkbox',
    name: '多选框',
    icon: 'Checked',
    category: 'basic',
    defaultProps: {
      type: 'checkbox',
      label: '多选框',
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' }
      ]
    },
    component: null
  },
  {
    type: 'date',
    name: '日期选择',
    icon: 'Date',
    category: 'basic',
    defaultProps: {
      type: 'date',
      label: '日期选择'
    },
    component: null
  },
  {
    type: 'time',
    name: '时间选择',
    icon: 'Clock',
    category: 'basic',
    defaultProps: {
      type: 'time',
      label: '时间选择'
    },
    component: null
  }
]

// 注册所有物料
materials.forEach(material => registerMaterial(material))

const categories = computed(() => {
  return Array.from(new Set(materials.map(m => m.category)))
})

const filteredMaterials = computed(() => {
  if (!searchText.value) return materials
  return materials.filter(m => 
    m.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
    m.type.toLowerCase().includes(searchText.value.toLowerCase())
  )
})

const onDragStart = (event: DragEvent, material: MaterialItem) => {
  console.log('Drag start:', material)
  // 使用全局状态存储拖拽物料
  store.dragMaterial = material
  // 同时设置dataTransfer作为备用
  const dragData = JSON.stringify({
    type: 'material',
    data: material
  })
  event.dataTransfer?.setData('text/plain', dragData)
  console.log('Drag material set in store:', material)
}

const addMaterial = (material: MaterialItem) => {
  const field = {
    id: generateId(),
    ...material.defaultProps
  }
  addField(field)
}
</script>